チャンネルメッセージング API

チャンネルメッセージング API (Channel Messaging API) を使用すると、同じ文書に添付された異なる閲覧コンテキストで実行される 2 つの別々のスクリプト(2 つの IFrame、メイン文書と IFrame、SharedWorker を介した 2 つの文書、 2 つのワーカーなど)で直接通信し、両端にポートを持つ双方向チャンネル(またはパイプ)を介して相互にメッセージをやり取りできます。

メモ: この機能はウェブワーカー内で利用可能です。

チャンネルメッセージングの概念と使用方法

メッセージチャンネルは MessageChannel() コンストラクターを使用して作成します。 作成すると、チャンネルの 2 つのポートは MessageChannel.port1 プロパティおよび MessageChannel.port2 プロパティを介してアクセスできます(どちらのプロパティも MessagePort オブジェクトを返します)。 チャンネルを作成したアプリは port1 を使用し、ポートの反対側のアプリは port2 を使用します — port2 にメッセージを送信し、window.postMessage を使用して 2 つの引数(送信するメッセージと所有権を移管するオブジェクト、この場合はポート自体)でポートを他の閲覧コンテキストに移管します。

これらの移譲可能オブジェクトが転送されると、それまで属していたコンテキストでは使えなくなります。ポートは、送信された後、元のコンテキストでは使用することができなくなります。

もう一方の閲覧コンテキストは、 onmessage を使用してメッセージを待ち受けし、イベントの data 属性を使用してメッセージの内容を取得することができます。 MessagePort.postMessage を使用して元の文書にメッセージを送り返すことで応答できます。

チャンネルへのメッセージ送信を停止したい場合は、MessagePort.close を呼び出してポートを閉じることができます。

この API の使用方法の詳細については、チャンネルメッセージングの使用を参照してください。

チャンネルメッセージングのインターフェイス

MessageChannel

メッセージを送信するための新しいメッセージチャンネルを作成します。

MessagePort

メッセージチャンネルのポートを制御して、一方のポートからメッセージを送信し、もう一方のポートで到着するのを待ち受けします。

PortCollection

MessagePort の配列。 同時に複数のポートにメッセージをブロードキャストできるようにするための実験的な解決策。

仕様書

Specification
HTML Standard
# channel-messaging

ブラウザーの互換性

MessageChannel

api.MessageChannel

BCD tables only load in the browser

api.MessagePort

BCD tables only load in the browser

MessagePort

api.MessageChannel

BCD tables only load in the browser

api.MessagePort

BCD tables only load in the browser

関連情報